<template>
  <a-layout class="flex flex-col justify-center w-full h-full flex-nowrap">
    <a-layout-content class="flex flex-row justify-center items-center flex-auto flex-nowrap">
      <div class="formwrap">
        <div class="title">上海地铁第三运营有限公司实训操作平台</div>
        <div class="form">
          <a-form ref="formRef" :model="formState" :rules="rules" autocomplete="off">
            <a-form-item name="account" label="用户名">
              <a-input
                v-model:value="formState.account"
                size="large"
                :maxlength="11"
                allow-clear
                placeholder="请输入用户名"
                @press-enter="onSubmit"
              >
                <template #prefix>
                  <img src="@/assets/images/icon_phone.png" alt="icon_phone" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item name="password" label="密码">
              <a-input
                v-model:value="formState.password"
                size="large"
                :maxlength="20"
                :type="locked ? 'password' : 'text'"
                placeholder="请输入密码"
                @press-enter="onSubmit"
              >
                <template #prefix>
                  <img src="@/assets/images/icon_password.png" alt="icon_password" />
                </template>
                <template #suffix>
                  <img
                    v-if="locked"
                    class="cursor-pointer"
                    src="@/assets/images/icon_eye_closed.png"
                    alt="icon_eye_closed"
                    @click="onChangeLock"
                  />
                  <img
                    v-else
                    class="cursor-pointer"
                    src="@/assets/images/icon_eye_open.png"
                    alt="icon_eye_open"
                    @click="onChangeLock"
                  />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item>
              <div class="flex flex-row justify-between flex-nowrap">
                <a-checkbox v-model:checked="checked">记住密码</a-checkbox>
              </div>
            </a-form-item>
            <a-form-item>
              <a-button class="w-full w-1/1" size="large" type="primary" @click="onSubmit">登录</a-button>
            </a-form-item>
          </a-form>
        </div>
      </div>
    </a-layout-content>
  </a-layout>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { userStore } from "@/store/modules/userStore";
import { useRouter } from "vue-router";

const router = useRouter();
const formRef = ref();
const checked = ref(false);
const locked = ref(true);

const rules = {
  account: [{ required: true, message: "请输入用户名", trigger: "change" }],
  password: [{ required: true, message: "请输入密码", trigger: "change" }]
};

const formState = reactive({
  account: undefined,
  password: undefined
});

onMounted(() => {
  const loginInfo = localStorage.getItem(`${import.meta.env.VITE_APP_TERRACE}-login-info`);
  try {
    if (loginInfo) {
      let parseObj = JSON.parse(loginInfo);
      formState.account = parseObj.account;
      formState.password = parseObj.password;
      checked.value = true;
    }
  } catch (e) {
    console.log(e);
  }
});

const onChangeLock = () => {
  locked.value = !locked.value;
};

const onSubmit = () => {
  formRef.value
    .validate()
    .then(() => {
      userStore()
        .login({
          account: formState.account,
          password: formState.password
        })
        .then(() => {
          router.push({
            path: "/home"
          });
        })
        .finally(() => {
          if (checked.value) {
            //记住密码
            let str = JSON.stringify({
              account: formState.account,
              password: formState.password
            });
            localStorage.setItem(`${import.meta.env.VITE_APP_TERRACE}-login-info`, str);
          } else {
            localStorage.removeItem(`${import.meta.env.VITE_APP_TERRACE}-login-info`);
          }
        });
    })
    .catch((e) => {
      console.log(e);
    });
};
</script>
<style scoped lang="less">
:deep(.ant-form-item-required) {
  &::before {
    content: "" !important;
  }
}
:deep(.ant-form-item-label > label) {
  color: black;
  width: 80px;
  text-align: center;
}
:deep(.ant-checkbox-wrapper) {
  span {
    color: black;
  }
}

.ant-layout-header {
  height: 82px;
  color: #fff;
  background: #fff;
  padding: 10px 50px;
}
.ant-layout-content {
  color: #fff;
  height: 100vh;
  background-color: #073650;

  .formwrap {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    margin-top: -220px;
    .title {
      width: 100%;
      height: 40px;
      text-align: center;
      margin-bottom: 30px;
      font-size: 32px;
      font-family:
        PingFang SC-Medium,
        PingFang SC;
      font-weight: 500;
      color: #ffff;
    }
    .form {
      width: 520px;
      padding: 34px 48px;
      background: #fff;
      border-radius: 4px 4px 4px 4px;
      color: black;
    }
  }
}
.seek-img {
  height: 25px;
}
</style>
